<template>
	<view class="container">
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack>
			<block slot="content">搜索</block>
		</bar-title>
		
		<!-- 搜索框 -->
		<view class="cu-bar search">
			<view class="search-form radius">
				<text class="cuIcon-search text-black">
					<text class="margin-left-xs solid-right"></text>
				</text>
				<input type="text" :placeholder="searchTitle"
					:adjust-position="false"
					v-model.trim="keywords"
					confirm-type="search"
					@confirm="toSearch"
				></input>
				<text class="cuIcon-close"
					@click="clearKeywords"
				></text>
			</view>
			
		</view>
		
		
		<!-- 关键词 -->
		<view class="search-keywords-warp" v-if="!listShow">

			<!-- 热门搜索 -->
			<view v-if="hotList.length">
				<view class="cu-bar padding text-lg">
					<text class="text-bold">热门搜索</text>
				</view>
				<view class="search-box padding-lr">
					<block v-for="(hot,index) of hotList"
						:key="index">
						<view  class="search-item" 
							@click="selectSuggest(hot.searchtext)"
						>{{hot.searchtext}}</view>
					</block>
				</view>
			</view>
			
			
			
			<!-- 历史搜索 -->
			<view class="scen" v-if="searchType=='scen'">
				<view class="cu-bar padding text-lg" v-if="searchHistory.length">
					<text class="text-bold">历史搜索</text>
					<text class="cuIcon-delete text-gray"
						@click="clearSearchHistory"
					></text>
				</view>
				<view class="search-box padding-lr" v-if="searchHistory.length"
					:class="{more:showMore}"
				>
					<block v-for="(history,index) of searchHistory" 
						:key="index">
						<view class="search-item"
							@click="selectSuggest(history)"
						>{{history}}</view>
					</block>
					<view v-if="!searchHistory.length"
						class="cu-bar padding justify-center text-gray"
					>
						<text class="margin-right-xs">暂无搜索记录</text>
					</view>
				</view>
					
					
				<view v-if="searchHistory.length>6 && !showMore"
					class="cu-bar padding justify-center text-gray"
					@click="showMore=true"
				>
					<text class="margin-right-xs">更多历史记录</text>
					<text class="cuIcon-unfold"></text>
				</view>
			</view>
			
			<view class="game" v-if="searchType=='game'">
				<view class="cu-bar padding text-lg" v-if="searchGameHistory.length">
					<text class="text-bold">历史搜索</text>
					<text class="cuIcon-delete text-gray"
						@click="clearSearchGameHistory"
					></text>
				</view>
				<view class="search-box padding-lr" v-if="searchGameHistory.length"
					:class="{more:showMore}"
				>
					<block v-for="(history,index) of searchGameHistory" 
						:key="index">
						<view class="search-item"
							@click="selectSuggest(history)"
						>{{history}}</view>
					</block>
					<view v-if="!searchGameHistory.length"
						class="cu-bar padding justify-center text-gray"
					>
						<text class="margin-right-xs">暂无搜索记录</text>
					</view>
				</view>
					
					
				<view v-if="searchGameHistory.length>6 && !showMore"
					class="cu-bar padding justify-center text-gray"
					@click="showMore=true"
				>
					<text class="margin-right-xs">更多历史记录</text>
					<text class="cuIcon-unfold"></text>
				</view>
				
				
				
			</view>
			
			
			<view class="idle" v-if="searchType=='idle'">
				<view class="cu-bar padding text-lg" v-if="searchIdleHistory.length">
					<text class="text-bold">历史搜索</text>
					<text class="cuIcon-delete text-gray"
						@click="clearSearchIdleHistory"
					></text>
				</view>
				<view class="search-box padding-lr" v-if="searchIdleHistory.length"
					:class="{more:showMore}"
				>
					<block v-for="(history,index) of searchIdleHistory" 
						:key="index">
						<view class="search-item"
							@click="selectSuggest(history)"
						>{{history}}</view>
					</block>
					<view v-if="!searchIdleHistory.length"
						class="cu-bar padding justify-center text-gray"
					>
						<text class="margin-right-xs">暂无搜索记录</text>
					</view>
				</view>
					
					
				<view v-if="searchIdleHistory.length>6 && !showMore"
					class="cu-bar padding justify-center text-gray"
					@click="showMore=true"
				>
					<text class="margin-right-xs">更多历史记录</text>
					<text class="cuIcon-unfold"></text>
				</view>
				
				
				
			</view>
			
		</view>
		
		
		<view class="search-list" v-else>
			<view v-if="searchType=='scen'">
				<block v-for="(info,index) of scenSearchList" :key="index">
					<ViewScen :scen-info="info"></ViewScen>
				</block>
			</view>
			
			<view v-if="searchType=='shop'">
				<block v-for="(info,index) of shopSearchList" :key="index">
					<ViewBusiness :shopInfo="info" ></ViewBusiness>
				</block>
			</view>
			
			<view v-if="searchType=='idle'">
				<view class="flex flex-wrap padding-sm">
					<view class="shadow-warp"
						v-for="(good, gin) in idleSearchList"
						:key="gin"
						:style="{ width: `calc(50% - 30rpx)`,
							margin: `0 15rpx 30rpx`
						}"
					>
						<ViewLeisurely :spu="good"></ViewLeisurely>
					</view>
				</view>
				
			</view>
			
			
			<view class="padding-top" v-if="searchType=='game'">
				<block v-for="(game,index) of gameSearchList" :key="index">
					<ViewScenario :activity="game"></ViewScenario>
				</block>
			</view>
			
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import ViewScen from '@/components/box/ViewScen.vue';
import ViewBusiness from '@/components/box/ViewBusiness.vue';
import ViewScenario from '@/components/box/ViewScenario.vue';
import ViewLeisurely from '@/components/box/ViewLeisurely.vue';

import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import { Game } from '@/models/game.js';

let searchTypeTitleObj = {
	scen: '搜索相关剧本',
	game: '搜索相关活动',
	shop: '搜索相关商铺',
	idle: '搜索相关闲本'
}
export default {
	data() {
		return {
			pagenum: 1,
            keywords: '',
            hotList: [],
			showMore: false,
			listShow: false,
			searchType: 'scen',
			searchTitle: '',
			loadingType: 'more',
			scenSearchList: [],
			gameSearchList: [],
			shopSearchList: [],
			idleSearchList: [],
		};
	},
	components: {
		ViewScen,
		ViewBusiness,
		ViewScenario,
		ViewLeisurely,
		uniLoadMore
	},
	onLoad(option) {
		if(option && option.type) {
			this.searchType = option.type
		}
		switch(this.searchType) {
			case 'scen': 
				this.getHotWords()
			break;	
			case 'game':
				this.getGameHotWords()
			break;	
			case 'idle':
				this.getIdleHotWords()
			break;
		}
		this.searchTitle = searchTypeTitleObj[this.searchType]
		
	},
	computed:{
		...mapState({
			"searchHistory": state => state.searchHistory,
			"searchGameHistory": state => state.searchGameHistory,
			"searchIdleHistory": state => state.searchIdleHistory
		}),
	},
	methods: {
        ...mapActions([
            'saveSearchHistory',
            'clearSearchHistory',
			'saveSearchIdleHistory',
			'clearSearchIdleHistory',
			'saveSearchGameHistory',
			'clearSearchGameHistory'
        ]),
		async getHotWords() {
			let searchHistory = await this.$apis.hotSearch()
			this.hotList = searchHistory
		},
		async getGameHotWords() {
			let searchGameHistory = await this.$apis.hotSearchGame()
			this.hotList = searchGameHistory
		},
		async getIdleHotWords() {
			let searchIdleHistory = await this.$apis.hotSearchIdle()
			this.hotList = searchIdleHistory
		},
		
		async getSecnSearch() {
			let scenSearchList = await this.$apis.secnSearch({
				searchplay: this.keywords,
				pagenum: this.pagenum
			})
			if (!scenSearchList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
			this.scenSearchList = this.scenSearchList.concat(scenSearchList)
		},
		async getGameSearch() {
			let gameSearchList = await Game.getGameNewList({
				searchtext: this.keywords,
				pagenum: this.pagenum
			})
			if (!gameSearchList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
			this.gameSearchList = this.gameSearchList.concat(gameSearchList)
		},
		async getShopSearch() {
			let shopSearchList =  await Game.getShopList({
				searchtext: this.keywords,
				pagenum: this.pagenum
			})
			if (!shopSearchList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
			this.shopSearchList = this.shopSearchList.concat(shopSearchList)
			console.log(this.shopSearchList);
		},
		async getIdleSearch() {
			let idleSearchList =  await this.$apis.idleSearch({
				search: this.keywords,
				pagenum: this.pagenum
			})
			if (!idleSearchList.length) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
			this.idleSearchList = this.idleSearchList.concat(idleSearchList)
		},
		
		clearKeywords(){
			this.listShow = false
			this.keywords = ''
			this.pagenum = 1
			this.scenSearchList = []
		},
        selectSuggest(keywords) {
            this.keywords = keywords
            this.toSearch()
        },
		toSearch(){
			
            if (this.keywords === "") {
				this.$mTool.showToast({
					title: '搜索词不能为空',
					icon: 'none'
				})
                return
            }
			this.listShow = true
			this.pagenum = 1
			this.loadingType = 'loading'
			
			
			if(this.searchType=='game'){
				this.saveSearchGameHistory(this.keywords)
				this.gameSearchList = []
				this.getGameSearch()
			}
			
			if(this.searchType=='scen'){
				this.saveSearchHistory(this.keywords)
				this.scenSearchList = []
				this.getSecnSearch()
			}
			
			if(this.searchType=='shop'){
				this.shopSearchList = []
				this.getShopSearch()
			}
			
			if(this.searchType=='idle'){
				this.saveSearchIdleHistory(this.keywords)
				this.idleSearchList = []
				this.getIdleSearch()
			}
            
		},
	},
	onReachBottom(e) {
		if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
		    return
		}
		this.pagenum = this.pagenum + 1
		if(this.searchType=='game'){
			this.getGameSearch()
		}
		if(this.searchType=='scen'){
			this.getSecnSearch()
		}
		if(this.searchType=='shop'){
			this.getShopSearch()
		}
	},
};
</script>

<style lang="scss" scoped>
	page, .container{
		background: #fff;
	}
	.search-form{
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		[class*="cuIcon-"] {
		    margin: 0 0.8em;
			font-size: 30rpx;
		}
	}
	.search-box{
		height: 200rpx;
		overflow: hidden;
		&.more{
			min-height: 200rpx;
			height: auto;
		}
		>.search-item{
			font-size: 14px;
			border-radius: 10rpx;
			display: inline-block;
			background-color: $page-color-light;
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;
			margin-right: 30rpx;
		}
	}
</style>
